<template>
	<view>
		<view class="topCnt">
			<scroll-view scroll-x style="width: 100%;">
				<view class="queryBox">
					<view @click="showLx = true" class="item">
						{{ lxName ? lxName : '收支类型' }}
						<u-icon name="arrow-right" size="28rpx"></u-icon>
					</view>
					<view @click="showxfLx = true" class="item">
						{{ xflxName ? xflxName : '业务类型' }}
						<u-icon name="arrow-right" size="28rpx"></u-icon>
					</view>
					<view class="item" style="margin-right: 10rpx;" @click="showDate = true">{{ kssj ? kssj : '开始时间' }}</view>
					<view style="margin-right: 10rpx;">-</view>
					<view class="item" @click="showDate2 = true">{{ jssj ? jssj : '结束时间' }}</view>
				</view>
			</scroll-view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="flex-cb card" v-for="(item, index) in list" :key="index">
			<view class="cont">
				<view>{{ item.consumeTypeName }}</view>
				<view>{{ item.description }}</view>
				<view>{{ item.createTime }}</view>
			</view>
			<view class="right">{{ item.flag == 1 ? '+' : '-' }}{{ item.price || 0 }}</view>
		</view>
		<u-loadmore v-if="!is && list.length >= 10" status="nomore" line />
		<view class="no-list" v-if="!list || list.length == 0">
			<image src="@/static/images/default_empty.png"></image>
			<view>暂无数据</view>
		</view>
		<u-picker :show="showLx" :columns="columns" @cancel="showLx = false" @confirm="ConfirmLx"
			keyName="name"></u-picker>
		<u-picker :show="showxfLx" :columns="consumeType" @cancel="showxfLx = false" @confirm="ConfirmXfLx" keyName="name"></u-picker>
		<u-datetime-picker :show="showDate" v-model="currentDate" mode="date" @confirm="startDateConfim"
			@cancel="showDate = false"></u-datetime-picker>
		<u-datetime-picker :show="showDate2" v-model="currentDateb" mode="date" @confirm="endDateConfim"
			@cancel="showDate2 = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getYMDHMS
	} from '@/utils/utils.js';
	export default {
		data() {
			return {
				type: '',
				kssj: '',
				jssj: '',
				showDate: false,
				showDate2: false,
				sjpd: '',
				currentDate: new Date(new Date().toLocaleDateString()).getTime(),
				currentDateb: new Date(new Date().toLocaleDateString()).getTime(),
				minDate: new Date('2000/01/01').getTime(),
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`;
					}
					if (type === 'month') {
						return `${value}月`;
					}
					return value;
				},
				checkAll: false,
				columns: [
					[{
							name: '全部',
							id: ''
						},
						{
							name: '收入',
							id: '1'
						},
						{
							name: '支出',
							id: '2'
						}
					]
				],
				consumeType: [],
				lxName: '',
				lxId: '',
				xflxName: '',
				xflxId: '',
				showLx: false,
				showxfLx: false,
				page: 0, //页码
				is: true, //控制是否还能切换下一页
				list: []
			};
		},
		onLoad() {
			this.getConsumeType();
			this.getList();
		},
		methods: {
			getList() {
				if (!this.is) return
				this.page = this.page + 1;
				this.$app.ajax({
					data: {
						pagination: {
							page: this.page,
							rows: 10
						},
						param: {
							consumeType: this.xflxId,
							startTime: this.kssj,
							flag: this.lxId,
							endTime: this.jssj
						}
					},
					api: this.$api.orderMoneyDetailByApp()
				}).then(res => {
					if (res.errorCode != '000000') return;
					if (res.recordList.length < 10 || !res.recordList) {
						this.is = false;
					}
					let arr = res.recordList;
					let arrs = [];
					if (arr) {
						arrs = this.list.concat(arr);
					} else {
						arrs = [];
					}
					this.list = arrs;
				});
			},
			startDateConfim(e) {
				this.kssj = getYMDHMS(e.value).slice(0, 10);
				this.is = true;
				this.page = 0;
				this.list = [];
				this.getList();
				this.showDate = false;
			},
			endDateConfim(e) {
				this.jssj = getYMDHMS(e.value).slice(0, 10);
				this.is = true;
				this.page = 0;
				this.list = [];
				this.getList();
				this.showDate2 = false;
			},
			ConfirmXfLx(e) {
				this.xflxId = e.value[0].code;
				this.xflxName = e.value[0].name;
				this.is = true;
				this.page = 0;
				this.list = [];
				this.getList();
				this.showxfLx = false;
			},
			ConfirmLx(e) {
				this.lxId = e.value[0].id;
				this.lxName = e.value[0].name;
				this.is = true;
				this.page = 0;
				this.list = [];
				this.getList();
				this.showLx = false;
			},
			getConsumeType() {
				this.$app.ajax({
					data: {
						param: {}
					},
					api: this.$api.getConsumeType()
				}).then(res => {
					if (res.errorCode != '000000') return;
					let arr = [{
						name: '全部',
						code: ''
					}, ...res.recordList]
					this.consumeType = [arr] 
				});
			},
			onReachBottom() {
				this.getList();
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.queryBox {
		display: flex;
		align-items: center;
		.item {
			background-color: #fff;
			padding: 12rpx 24rpx;
			border-radius: 40rpx;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			flex-shrink: 0;
		}
	}

	.topCnt {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 0 30rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		background: #f7f7f7;
		z-index: 99;
	}

	.top {
		display: flex;
		white-space: nowrap;
		align-items: center;
		box-sizing: border-box;
	}

	.top .label {
		line-height: 58rpx;
		background: #fff;
		text-align: center;
		padding: 0 24rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		margin-right: 20rpx;
		color: #333333;
		border: 1px solid #fff;
	}

	.top .label:last-of-type {
		margin-right: 0;
	}

	.top .label.on {
		background: #eaf0ff;
		border-color: #4167c1;
		color: #4167c1;
	}

	.top .label.time {
		margin-right: 10rpx;
	}

	.top .gd {
		color: #333333;
		font-size: 26rpx;
		margin-right: 10rpx;
	}

	.card {
		box-sizing: border-box;
		background-color: #fff;
		margin: 0 auto 30rpx;
		width: 690rpx;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.right {
		color: #dd5040;
		font-size: 28rpx;
		font-weight: bolder;
	}

	.cont {
		flex: 1;
		color: #666666;
		text-align: left;
		font-size: 24rpx;
		line-height: 1.5;
	}

	.cont view {
		margin-top: 10rpx;
	}

	.cont view:first-of-type {
		color: #222222;
		font-size: 28rpx;
		font-weight: bolder;
		margin-top: 0;
	}

	.ul {
		padding-bottom: 120rpx;
	}
</style>